import React, { Component,useState } from 'react'
import "./index.scss"
import { Layout, Menu, Breadcrumb } from 'antd';
import MyHead from './myHead';
import MyMenu from './myMenu';
import mobxdata  from "../../mobx/data"
import { request } from '../../api';
import {Redirect, Route, Switch} from "react-router-dom"
import LazyLoad from '../../utils/lazyload'
import {withRouter} from "react-router-dom"
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

// const [collapsed,setCollapsed] = useState(false)
export default class MainCom extends Component {
    state={
        collapsed: false,
        list:[]
    }
    onCollapse = collapsed => {
        // collapsed=false
        // console.log(collapsed);
        this.setState({ collapsed:!this.state.collapsed });
    };
    componentDidMount(){
        request.getuserinfo()
        .then(res=>{
            if(res.code==200){
                mobxdata.changeuserinfo(res.result)  //存储mobx 全局变量
            }else if(res.code==3000){
                this.props.history.push("/login")
            }
        })


        const {pathname} = this.props.location
        const names = pathname.split("/")
        var txt = ""
        names.forEach((l,i)=>{
            if(l){

                txt += "/"+l
                this.state.list.push({
                    i:i,
                    title:l,
                    txt
                })
            }
        })
        this.setState({
            list:this.state.list
        })
    }
    goBreadcrumb=(path)=>{
        // this.props.history.push(path)
    }
    render() {
        return (
            <div className="main">
                <Layout style={{ minHeight: '100vh' }}>
                    {console.log(this.state.collapsed)}
                    <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                    <div className="logo" >
                        <img style={{height:40,width:'100%',display:this.props.collapsed?'none':'block'}} src='http://img01.yun300.cn/repository/image/MVxn63bLTeClPOQLpF45UA.png?k=1560392951000&tenantId=74111&viewType=1&k=1606877716000' alt=""/>
                    </div>
                    <MyMenu history={this.props.history}></MyMenu>
                    </Sider>
                    <Layout className="site-layout">
                        <MyHead history={this.props.history}></MyHead>
                        <Content style={{ margin: '0 16px'}}>
                            
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                {
                                    this.state.list.map((l,i)=>{
                                        return(
                                            <Breadcrumb.Item key={i} onClick={()=>this.goBreadcrumb(l.txt)}>{l.title}</Breadcrumb.Item>
                                        )
                                    })
                                }
                            </Breadcrumb>
                            <Switch>
                                <Route path="/main" exact render={()=>(<Redirect to="/main/home" />)}></Route>
                                <Route path="/main/home" exact component={LazyLoad(()=>import("../home"))}></Route>
                                <Route path="/main/user"  component={
                                    ()=>(
                                        <Switch>
                                            <Route path="/main/user" exact render={()=>(<Redirect to="/main/user" />)}></Route>
                                            <Route path="/main/user/list"  component={LazyLoad(()=>import("../user/list"))}></Route>
                                            <Route path="/main/user/fenxi"  component={LazyLoad(()=>import("../user/fenxi"))}></Route>
                                        </Switch>
                                    )
                                }></Route>
                                <Route path="/main/heathy"  component={
                                    ()=>(
                                        <Switch>
                                            <Route path="/main/heathy" exact render={()=>(<Redirect to="/main/heathy" />)}></Route>
                                            <Route path="/main/heathy/tiwen"  component={LazyLoad(()=>import("../heathy/tiwen"))}></Route>
                                            <Route path="/main/heathy/yimiao"  component={LazyLoad(()=>import("../heathy/yimiao"))}></Route>
                                            <Route path="/main/heathy/yaowu"  component={LazyLoad(()=>import("../heathy/yaowu"))}></Route>
                                            <Route path="/main/heathy/jiuzhen"  component={LazyLoad(()=>import("../heathy/jiuzhen"))}></Route>
                                        </Switch>
                                    )
                                }></Route>
                                <Route path="/main/advise"  component={
                                    ()=>(
                                        <Switch>
                                            <Route path="/main/advise" exact render={()=>(<Redirect to="/main/advise" />)}></Route>
                                            <Route path="/main/advise/list"  component={LazyLoad(()=>import("../advise/list"))}></Route>
                                            <Route path="/main/advise/fenxi"  component={LazyLoad(()=>import("../advise/fenxi"))}></Route>
                                        </Switch>
                                    )
                                }></Route>
                                <Route path="/main/anno"  component={
                                    ()=>(
                                        <Switch>
                                            <Route path="/main/anno" exact render={()=>(<Redirect to="/main/anno" />)}></Route>
                                            <Route path="/main/anno/list"  component={LazyLoad(()=>import("../anno/list"))}></Route>
                                            <Route path="/main/anno/add"  component={LazyLoad(()=>import("../anno/add"))}></Route>
                                        </Switch>
                                    )
                                }></Route>
                                <Route path="/main/mine" exact component={LazyLoad(()=>import("../mine"))}></Route>
                                <Route exact render={()=>(<Redirect to="/main/home" />)}></Route>
                            </Switch>
                            {/* <div className="site-layout-background" style={{ padding: 24, minHeight: 760 }}>
                                Bill is a cat.
                            </div> */}
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>物业管理系统 版权所有 &copy; 鄂ICP备2021002584号</Footer>
                    </Layout>
                </Layout>
            </div>
        )
    }
}
